import React, { useRef } from "react";
// 引入 store 。这个文件需要用上 store.dispatch
import store from "../store";

// 引入 todoAdd 这个动作创建函数
import { todoAdd } from "../store/actions/todos";

export default function TodoAdd() {
  const inputRef = useRef();

  function onAdd() {
    // 1. 获取输入框的内容
    const value = inputRef.current.value.trim();
    // 2. 判断一下是否没有输入
    if (!value) {
      return;
    }

    // 3. 去修改仓库中的数据 - dispatch 派发一个动作
    // store.dispatch({
    //   type: "TODO_ADD",
    //   text: value,
    // });

    store.dispatch(todoAdd(value));
  }

  return (
    <div className="todo-add">
      <input
        ref={inputRef}
        type="text"
        className="todo-add__input"
        placeholder="请输入内容"
      />
      <button className="todo-add__button" onClick={onAdd}>
        新增
      </button>
    </div>
  );
}
